<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';

import left_1 from './components/left_1.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
// import AMapLoader from "@amap/amap-jsapi-loader";
import api from '@/http/public.js';
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,
        left_1,
    },
    setup() {
        const ViewRef = ref(null);
        const topList = ref([
            { name: '实时有功功率', value: 0, unit: 'MW' },
            { name: '实时无功功率', value: 0, unit: 'MVa' },
            { name: '实时功率因数', value: 0, unit: '' },
            { name: '调度有功功率', value: 0, unit: 'MW' },
            { name: '调度无功功率', value: 0, unit: 'MVar' },

        ]);
        const dataContainer = reactive({
            loading: false,
            leftOne: [],
            topTwo: [],
            times: '',
            morenTime: ''
        });
        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function generateTimeArray() {
            return Array.from({ length: 24 * 60 }, (_, index) => {
                const hour = Math.floor(index / 60);
                const minute = index % 60;
                return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
            });
        }
        function init() {
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            api.getShow1({
                code: 'show_4',
                dat: {
                    // cod2: 'his'
                    q: ''
                },

            }).then(res => {
                dataContainer.leftOne = res.dat.inf
                topList.value.forEach((v, index) => {
                    v.value = res.dat.pwr[index]
                })

                dataInfo.value.xData = generateTimeArray()
                dataInfo1.value.xData = generateTimeArray()
                dataInfo.value.data = res.dat.crv
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo1.value.data = res.dat.his
            })
            // api.getShow1({ code: 'show_4', dat: [dataContainer.times, dataContainer.times] }).then(res => {
            //     console.log(res)

            //     
            // })
        }
        onMounted(() => {
            computeRem();
            let imageContainer = document.getElementById("container");
            let imgs = document.getElementById("imgs");
            imageContainer.addEventListener("wheel", function (event) {
                event.preventDefault(); // 阻止默认滚动行为

                var zoom = event.deltaY > 0 ? 0.9 : 1.1; // 根据滚动方向确定缩放比例
                var currentWidth = imageContainer.offsetWidth;
                var currentHeight = imageContainer.offsetHeight;

                imgs.style.width = currentWidth * zoom + "px";
                imgs.style.height = currentHeight * zoom + "px";
            });
            // window._AMapSecurityConfig = {
            //     securityJsCode: 'c66e09a018d8b163e7cf7b69eb2c84cc',
            // }
            // const markers = [{
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            //     position: [116.205467, 39.907761]
            // }, {
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
            //     position: [116.368904, 39.913423]
            // }, {
            //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
            //     position: [116.305467, 39.807761]
            // }];
            // AMapLoader.load({
            //     key: "42c6dd3f5c908dacc63c021f6f722dea",
            //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
            //     plugins: [],
            //     // plugins: ["AMap.Scale", "AMap.GeoJSON", "AMap.Geocoder", 'places', 'satellite'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
            // })
            //     .then((AMap) => {
            //         const maps = new AMap.Map("container", {
            //             zoom: 13, //设置地图的缩放级别
            //             // zooms: [8, 20], //设置地图的缩放级别区间
            //             center: [116.397428, 39.90923], //设置地图中心点坐标
            //             // mapStyle: "amap://styles/darkblue", //设置地图的显示样式，更改darkblue为你想要的样式
            //             features: ["road", "point"], //设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
            //             layers: [
            //                 new AMap.TileLayer.Satellite() // 添加卫星图层
            //             ],
            //             defaultType: 0,
            //             // mapTypeId:'satellite'
            //         });
            //         // // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
            //         markers.forEach(function (marker) {
            //             new AMap.Marker({
            //                 map: maps,
            //                 icon: marker.icon,
            //                 position: [marker.position[0], marker.position[1]],
            //                 offset: new AMap.Pixel(13, 15)
            //             });
            //         });
            //         // this.map.on('click', this.clickMap);  //监听地图点击事件
            //     })
            //     .catch((err) => {
            //         console.log(err, "err");
            //     });
            init()
        });
        let timer = setInterval(() => {
            computeRem();
            init()
        }, 60000);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });
        const dataInfo = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001'],
            xData: [],
            data: [],
            name: ['风电场实发有功功率(MW)', '风电场实发无功功率(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线',],
            end: 5
        })
        const dataInfo1 = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001'],
            name: ['风电场有功功率历史数据(MW)', '风电场无功功率历史数据(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线'],
            data: [],
            xData: [],
            end: 5
        })
        return {
            dataContainer,
            ViewRef,
            topList,
            dataInfo,
            dataInfo1
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt="">
                            <span class="temp">多云</span>
                            <span class="numberC">10</span>
                            <span class="cs">&nbsp; ℃</span> -->
                            <span class="numberC">风电场模块</span>
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>
                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div class="title">基础信息</div>
                        <left_1 :dataInfo="dataContainer.leftOne"></left_1>
                    </div>
                    <div class="left_box_item1" style="height: 20rem;">
                        <div class="title">风机位置分布图</div>
                        <div class="box_img" style="margin: 0.625rem;overflow: hidden;" id="container">
                            <img id="imgs" src="./assets/mapimg.png" alt="">
                        </div>
                    </div>
                    <div class="left_box_item1" style="height: 19rem;">
                        <div class="title">电气主接线图</div>
                        <div class="box_img xiantu"></div>
                    </div>
                </div>
                <div class="right_box">
                    <div class="right_box_item1" style="height: 10rem;">
                        <div class="title">实时功率指标</div>
                        <div class="lists">
                            <div class="items" v-for="(item, index) in topList" :key="index">
                                <p>{{ item.name }}</p>
                                <p class="num_p">{{ item.value.toFixed(2) }} {{ item.unit }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="right_box_item1 changbeij" style="height: 24rem;">
                        <div class="title">电站发电曲线</div>

                        <brokenline v-if="dataInfo.data.length" :dataInfo="dataInfo"></brokenline>
                    </div>
                    <div class="right_box_item1 changbeij" style="height: 24rem;">

                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">风电场历史数据展示</div>
                            <el-date-picker v-model="dataContainer.morenTime"
                                style="max-width: 20rem;background: none;transform: translateY(0.188rem);"
                                type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"
                                size="small" />
                        </div>
                        <brokenline v-if="dataInfo1.data.length" :dataInfo="dataInfo1"></brokenline>
                    </div>
                </div>

            </div>
        </div>
    </el-scrollbar>
</template>
<style>
.amap-icon {
    overflow: auto !important;
}

.amap-icon img {
    transform: translateX(-25px) !important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-range-input {
    color: #fff;
}

::v-deep .el-range-separator {
    color: #fff;
}

::v-deep .el-picker-panel__body-wrapper {
    background: #031045c7 !important;
}

.big-screen-view {
    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/images/bjdazong.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        justify-content: space-between;
        width: 100%;

        >.left_box,
        .right_box {
            padding: 0 0.625rem;
            // height: 100%;
            margin-top: 1.250rem;
            overflow: hidden;

            // flex: 1 1 0;
            // width: 37.500rem;
            .title {
                color: #FFFFFF;
                font-size: 1rem;
                // margin-left: 1rem;
                background: url('@/assets/img-show2/smallTitle.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 1.875rem;
                line-height: 1.875rem;
                width: 34rem;
                padding-left: 1rem;
            }



        }

        .left_box {
            width: 30%;

            .left_box_item1 {
                background-image: url('@/assets/img-show2/borderBack.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                margin-bottom: 1.250rem;

                .xiantu {
                    background: url('./assets/xiantu.png') no-repeat;
                    background-size: 100% 100%;
                    background-position: center;
                }

                .box_img {
                    text-align: center;
                    padding: 0.625rem;
                    height: 75%;

                    .imgs {
                        width: 95%;
                        height: 80%;
                    }

                }

                // padding: 1.000rem;
            }
        }

        .right_box {
            width: 70%;

            .right_box_item1 {
                margin-bottom: 1.250rem;

                .lists {

                    // margin: auto 1rem;
                    margin-top: 1.250rem;
                    display: flex;
                    justify-content: space-between;
                    overflow: hidden;

                    .items {
                        width: 14.375rem;
                        height: 6.875rem;
                        background-image: url('@/assets/images/xiao.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        border-radius: 0.313rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        p {
                            color: #3adeff;
                            font-size: 1.4rem;
                            // margin-top: 1.250rem;
                        }

                        .num_p {
                            font-size: 1.2rem;
                            color: #fff;
                            margin-top: 0.625rem;
                        }
                    }
                }
            }

            .changbeij {
                background-image: url('@/assets/images/chang.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
            }
        }
    }
}
</style>
